<template>
    <view class="page">
        <view class="cancel-box">
            <view class="cancel-title">取消原因</view>
            <radio-group @change="radioChange">
                <view class="cancel-item" v-for="(item, index) in reasonsData" :key="index">
                   {{item.title}}
                    <radio :value="item.value" :checked="index === current"  />
                </view>
                <textarea class="remark" placeholder="请在此描述您的详细信息" v-model="remark"></textarea>
            </radio-group>
        </view>
        <view class="operate-box" @tap="onSubmit">提交</view>
    </view>
</template>

<script>
  import { orderCancel } from '@/api/car.js';
  
  export default {
    data(){
      return {
        reasonsData: [
          {
            id: 1,
            title: '已用其他工具下单',
            value: '已用其他工具下单'
          },
          {
            id: 2,
            title: '没有想要的车辆',
            value: '没有想要的车辆'
          },
          {
            id: 3,
            title: '重复下单了',
            value: '重复下单了'
          },
          {
            id: 4,
            title: '临时改变主意，不需要了',
            value: '临时改变主意，不需要了'
          },
          {
            id: 5,
            title: '其他（必填原因）',
            value: '其他（必填原因）'
          }
        ],
        remark: '',
        current: 0,
        order_id: '',
      }
    },
    computed: {
      cancel_reason(){
          return (this.current != this.reasonsData.length - 1) ? this.reasonsData[this.current].value : this.remark
      }
    },
    onLoad(options){
      if(options.order_id){
        this.order_id = options.order_id
      }
    },
    methods: {
      radioChange: function(evt) {
          console.log('evt', evt)
          for (let i = 0; i < this.reasonsData.length; i++) {
              if (this.reasonsData[i].value === evt.detail.value) {
                  this.current = i;
                  break;
              }
          }
        
      },
      onSubmit(){
        console.log('提交')
        this.orderCancel()
      },
      // 取消订单
      orderCancel(){
        if((this.current == this.reasonsData.length - 1) && !this.remark){ // 其他（必填原因）
          this.$util.Tips({
            title: '请填写原因'
          })
          return;
        }
      	let that = this;
      	let content = '确定取消订单吗？';
      	uni.showModal({
      		title:'订单取消',
      		content:content,
      		success(res) {
      			if(res.confirm){
      				uni.showLoading({ title:'取消中...', mask:true })
              let params = {order_id: that.order_id, cancel_reason: that.cancel_reason};
              console.log('params----', params)
      				orderCancel(params).then((res)=>{
      					uni.hideLoading();
      					uni.showToast({ title:res.data.msg, icon:'none' })
                uni.navigateBack()
      				}).catch((err)=>{
      					uni.hideLoading();
      					uni.showToast({ title:err, icon:'none' })
      				})
      			}
      		}
      	})
      },
    }
  }
</script>

<style scoped lang="scss">
  .cancel-box{
    width: 710rpx;
    padding: 30rpx 30rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 24rpx 20rpx;
    box-sizing: border-box;
    .cancel-title{
       font-weight: 500;
       font-size: 30rpx;
       color: #333333;
       padding: 0 0 26rpx 0;
       border-bottom: 1rpx solid #EFEFEF;
    }
    .cancel-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #3D3E3F;
      padding: 26rpx 0;
      border-bottom: 1rpx solid #EFEFEF;
      &:last-child{
        border-bottom: none;
      }
    }
    .remark{
      width: 650rpx;
      height: 318rpx;
      padding: 30rpx;
      box-sizing: border-box;
      background: #FAFAFA;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .operate-box{
    width: 686rpx;
    height: 96rpx;
    line-height: 96rpx;
    margin: 40rpx auto 30rpx;
    box-sizing: border-box;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #FFFFFF;
    background: #008DFF;
    text-align: center;
    border-radius: 12rpx;
  }
</style>